<template>
  <a-modal
      :confirmLoading="confirmLoading"
      :footer="null"
      :maskClosable="false"
      :title="title"
      :visible="visible"
      :width="720"
      @cancel="handleCancel"
  >
    <a-descriptions :column="2" label-class-name="desc-label">
      <a-descriptions-item label="商户退款单号">
        <a-tag size="small">{{ refundDetail.merchantRefundId }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="渠道退款单号">
        <a-tag
            v-if="refundDetail.channelRefundNo"
            color="green"
            size="small"
        >
          {{ refundDetail.channelRefundNo }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="商户支付单号">
        <a-tag size="small">{{ refundDetail.merchantOrderId }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="渠道支付单号">
        <a-tag color="green" size="small">{{ refundDetail.channelOrderNo }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="应用编号">{{ refundDetail.appId }}</a-descriptions-item>
      <a-descriptions-item label="应用名称">{{ refundDetail.appName }}</a-descriptions-item>
      <a-descriptions-item label="支付金额">
        <a-tag color="green" size="small">
          {{ refundDetail.payPrice | price }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="退款金额">
        <a-tag color="red" size="small">
          {{ refundDetail.refundPrice | price }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="退款状态">
        <a-tag :color="(Status[refundDetail.status] ||  {color:''}).color">
          {{ (Status[refundDetail.status] || {name: ''}).name }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="退款时间">
        {{ refundDetail.successTime | moment }}
      </a-descriptions-item>
      <a-descriptions-item label="创建时间">
        {{ refundDetail.creationTime | moment }}
      </a-descriptions-item>
    </a-descriptions>

    <a-divider/>

    <a-descriptions :column="2" label-class-name="desc-label">
      <a-descriptions-item label="退款渠道">
        <a-tag>{{ (PayChannelCode[refundDetail.channelCode] || {name: ''}).name }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="退款原因">{{ refundDetail.reason }}</a-descriptions-item>
      <a-descriptions-item label="退款 IP">{{ refundDetail.userIp }}</a-descriptions-item>
      <a-descriptions-item label="通知 URL">{{ refundDetail.notifyUrl }}</a-descriptions-item>
    </a-descriptions>

    <a-divider/>

    <a-descriptions :column="1" bordered label-class-name="desc-label" layout="vertical">
      <a-descriptions-item label="支付通道异步回调内容">
        <div style="white-space: pre-wrap; word-break: break-word">
          {{ refundDetail.channelNotifyData }}
        </div>
      </a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>

<script>
import {Descriptions, Divider, Modal, Tag} from 'ant-design-vue'
import * as RefundApi from '@/api/pay/refund'
import RefundStatusEnum from "@/common/enum/pay/RefundStatusEnum";
import PayChannelCodeEnum from "@/common/enum/pay/PayChannelCodeEnum";

export default {
  name: 'PayRefundDetail',
  components: {
    'a-modal': Modal,
    'a-descriptions': Descriptions,
    'a-descriptions-item': Descriptions.Item,
    'a-tag': Tag,
    'a-divider': Divider
  },
  data() {
    return {
      // 对话框标题
      title: '订单详情',
      // modal(对话框)是否可见
      visible: false,
      // modal(对话框)确定按钮 loading
      confirmLoading: false,
      refundDetail: {}
    }
  },
  computed: {
    Status() {
      return RefundStatusEnum
    },
    PayChannelCode() {
      return PayChannelCodeEnum
    }
  },
  methods: {
    async open(id) {
      this.visible = true
      this.confirmLoading = true
      try {
        this.refundDetail = await RefundApi.detail(id)
      } finally {
        this.confirmLoading = false
      }
    },
    // 关闭对话框事件
    handleCancel() {
      this.visible = false
    }
  }
}
</script>
<style lang="less">
.ant-modal-body {
  padding-bottom: 24px !important;
}
</style>